<!DOCTYPE html>
<html lang="en">

<head>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" class="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link rel="stylesheet" href="./css/index.css">
    <title>工作台</title>
    <script>
      (function (window, document) {
        var setRem = function () {
          var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth;
          if (innerWidth > 768) {
            document.documentElement.style.fontSize = 48 + 'px';
          } else {
            document.documentElement.style.fontSize = innerWidth / 15 + 'px';
          }
        };
        window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', setRem, false);
        setRem();
      })(window, document);
    </script>
  </head>

<body>
  <div id="app">
    <div class="top">
      <div class="top-item">
        <p class="yuan">30</p>
        <p class="text">组织机构</p>
      </div>
      <div class="top-item">
        <p class="yuan yuan1">10</p>
        <p class="text">子公司</p>
      </div>
      <div class="top-item">
        <p class="yuan yuan2">3</p>
        <p class="text">分公司</p>
      </div>
      <div class="top-item">
        <p class="yuan yuan3">14</p>
        <p class="text">指挥部</p>
      </div>
    </div>
    <div class="title">
      <p class="left">人员统计</p>
      <div class="right">
        <p></p>
        <p></p>
        <p></p>
      </div>
    </div>
    <div class="echart">
      <div class="nav">
        <p :class="{active:active == 1}" @click="navTab(1)">学历</p>
        <p :class="{active:active == 2}" @click="navTab(2)">性别</p>
        <p :class="{active:active == 3}" @click="navTab(3)">年龄</p>
        <p :class="{active:active == 4}" @click="navTab(4)">工龄</p>
        <p :class="{active:active == 5}" @click="navTab(5)">员工类别</p>
      </div>
      <!-- <div id="main" style="width: 109%;height:10rem;margin-top:-1rem"></div> -->
      <div id="main"  style="width: 100%;height: 10rem;margin-top: -1rem;position: absolute;" :style="{opacity: active == 1 ? 1 :0}"></div>
      <div id="main6" style="width: 100%;height: 10rem;margin-top: -1rem;position: absolute;" :style="{opacity: active == 2 ? 1 :0}"></div>
      <div id="main7" style="width: 100%;height: 10rem;margin-top: -1rem;position: absolute;" :style="{opacity: active == 3 ? 1 :0}"></div>
      <div id="main8" style="width: 100%;height: 10rem;margin-top: -1rem;position: absolute;" :style="{opacity: active == 4 ? 1 :0}"></div>
      <div id="main9" style="width: 100%;height: 10rem;margin-top: -1rem;position: absolute;" :style="{opacity: active == 5 ? 1 :0}"></div>
    </div>
    <div class="title" style="margin-top: 9rem ">
      <p class="left">项目分布情况</p>
      <div class="right">
        <p></p>
        <p></p>
        <p></p>
      </div>
    </div>
    <div class="map">
      <!-- <img src="./images/pic.png" alt=""> -->
      <div id="map" style="width: 100%;height: 10rem;"></div>
    </div>
    <div class="title">
      <p class="left">员工培训统计</p>
      <div class="right">
        <p></p>
        <p></p>
        <p></p>
      </div>
    </div>
    <div class="echart">
      <div class="choose">
        <p class="choose-text">年度：</p>
        <select name="" id="select">
          <option value="">2015</option>
          <option value="">2016</option>
          <option value="">2017</option>
          <option value="">2018</option>
          <option value="">2019</option>
        </select>
      </div>
      <div id="main1" style="width: 109%;height:10rem;margin-top:-1rem"></div>
    </div>
    <div class="title">
        <p class="left">工资总额执行情况年度统计表</p>
        <div class="right">
          <p></p>
          <p></p>
          <p></p>
        </div>
      </div>
      <div class="echart">
        <div class="choose">
          <p class="choose-text">年度：</p>
          <select name="" id="select">
            <option value="">2015</option>
            <option value="">2016</option>
            <option value="">2017</option>
            <option value="">2018</option>
            <option value="">2019</option>
          </select>
        </div>
        <div id="main2" style="width: 109%;height:10rem;margin-top:-1rem"></div>
      </div>
  </div>
</body>
<script src="./js/index.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/china.js"></script>
<script>
   function randomData() {  
     return Math.round(Math.random()*500);  
} 
    var mydata = [  
          {name: '北京',value: '100' },{name: '天津',value: randomData() },  
          {name: '上海',value: randomData() },{name: '重庆',value: randomData() },  
          {name: '河北',value: randomData() },{name: '河南',value: randomData() },  
          {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },  
          {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },  
          {name: '安徽',value: randomData() },{name: '山东',value: randomData() },  
          {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },  
          {name: '浙江',value: randomData() },{name: '江西',value: randomData() },  
          {name: '湖北',value: randomData() },{name: '广西',value: randomData() },  
          {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },  
          {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },  
          {name: '吉林',value: randomData() },{name: '福建',value: randomData() },  
          {name: '贵州',value: randomData() },{name: '广东',value: randomData() },  
          {name: '青海',value: randomData() },{name: '西藏',value: randomData() },  
          {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },  
          {name: '海南',value: randomData() },{name: '台湾',value: randomData() },  
          {name: '香港',value: randomData() },{name: '澳门',value: randomData() }  
      ]; 
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      active: 1
    },
    created() {
      console.log("vue")
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          // text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          // data: ['销量']
        },
        xAxis: {
          data: ["小学", "初中", "高中", "大专", "本科", "硕士", "博士"]
        },
        yAxis: {},
        series: [{
          // name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20,20],
          itemStyle:{
            color:'#4db4ec'
          }
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById('main1'));

      // 指定图表的配置项和数据
      var option1 = {
        title: {
          // text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          // data: ['销量']
        },
        xAxis: {
          data: ["小学", "初中", "高中", "大专", "本科", "硕士", "博士"]
        },
        yAxis: {},
        series: [{
          // name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20,20],
          itemStyle:{
            color:'#4db4ec'
          }
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);

      // 基于准备好的dom，初始化echarts实例
      var myChart2 = echarts.init(document.getElementById('main2'));

      // 指定图表的配置项和数据
      var option2 = {
        title: {
          // text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          // data: ['销量']
        },
        xAxis: {
          data: ["小学", "初中", "高中", "大专", "本科", "硕士", "博士"]
        },
        yAxis: {},
        series: [{
          // name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20,20],
          itemStyle:{
            color:'#4db4ec'
          }
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(option2);
      // 
        // 基于准备好的dom，初始化echarts实例
        var myChart6 = echarts.init(document.getElementById('main6'));
      var option6 = {
        title: {
          // text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          // data: ['销量']
        },
        xAxis: {
          data: ['男','女']
        },
        yAxis: {},
        series: [{
          // name: '销量',
          type: 'bar',
          data: [1500,2000],
          itemStyle: {
            color: '#4db4ec'
          }
        }]
      };
      myChart6.setOption(option6);
      // 
       // 基于准备好的dom，初始化echarts实例
       var myChart7 = echarts.init(document.getElementById('main7'));
      var option7 = {
        title: {
          // text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          // data: ['销量']
        },
        xAxis: {
          data: ['20岁以下','20-29岁','20-29岁','30-39岁','40-49岁','50岁及以上']
        },
        yAxis: {},
        series: [{
          // name: '销量',
          type: 'bar',
          data: [150,200,100,300,400,300],
          itemStyle: {
            color: '#4db4ec'
          }
        }]
      };
      myChart7.setOption(option7);
       // 基于准备好的dom，初始化echarts实例
      var myChart8 = echarts.init(document.getElementById('main8'));
      var option8 = {
        title: {
          // text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          // data: ['销量']
        },
        xAxis: {
          data: ['5年以下','5-9年','10-14年','15-19年','20年及以上']
        },
        yAxis: {},
        series: [{
          // name: '销量',
          type: 'bar',
          data: [30,20,10,30,40],
          itemStyle: {
            color: '#4db4ec'
          }
        }]
      };
      myChart8.setOption(option8);
         // 基于准备好的dom，初始化echarts实例
        var myChart9 = echarts.init(document.getElementById('main9'));
      var option9 = {
        title: {
          // text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          // data: ['销量']
        },
        xAxis: {
          data: ['正式职工','合同工','临时工']
        },
        yAxis: {},
        series: [{
          // name: '销量',
          type: 'bar',
          data: [30,20,10],
          itemStyle: {
            color: '#4db4ec'
          }
        }]
      };
      myChart9.setOption(option9);
       // 
       var optionMap = {  
                // backgroundColor: '#FFFFFF',  
                title: {  
                    // text: '全国地图大数据',  
                    // subtext: '',  
                    // x:'center'  
                },  
                tooltip : {  
                    trigger: 'item'  
                },  
                
                //左侧小导航图标
                visualMap: {  
                    // show : true,  
                    x: 'left',  
                    // y: 'center',  
                    splitList: [   
                        {start: 500, end:600},{start: 400, end: 500},  
                        {start: 300, end: 400},{start: 200, end: 300},  
                        {start: 100, end: 200},{start: 0, end: 100},  
                    ],  
                    color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']  
                },  
                
                //配置属性
                series: [{  
                    name: '数据',  
                    type: 'map',  
                    mapType: 'china',   
                    roam: false,  
                    label: {  
                        normal: {  
                            show: true  //省份名称  
                        },  
                        emphasis: {  
                            show: false  
                        }  
                    },  
                    data:mydata  //数据
                }]  
            };  
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('map'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(optionMap);
    },
    methods: {
      navTab(index) {
        this.active = index
      }
    },
  })
</script>

</html>